@let branding = branding$ | async;
@let config = builderConfig$ | async;
<div class="builder-sidebar" [ngClass]="sidebarDrawer.opened ? 'opened' : 'closed'">
  @if (branding) {
    <a [routerLink]="[branding.header.logo?.href ?? '/home']" class="logo">
      @if (branding.header.logo?.img) {
        @let logo = branding.header.logo;
        @if (!sidebarDrawer.opened) {
          <img
            [src]="logo?.invert"
            [alt]="logo?.label"
            [width]="logo?.img?.width || 65"
            [height]="logo?.img?.height || 40"
          />
        } @else {
          <img
            [src]="logo?.img?.src"
            [width]="logo?.img?.width || 65"
            [height]="logo?.img?.height || 40"
            [alt]="logo?.label"
          />
        }
      }
    </a>
  }
  <mat-divider />

  @if (config) {
    @if (config.menu) {
      <app-accordion-menu
        class="accordion-menu"
        [ngClass]="sidebarDrawer.opened ? '' : '!hidden'"
        [hidden]="!sidebarDrawer.opened"
        [content]="config.menu"
      />
    }
  } @else {
    <ngx-skeleton-loader
      [theme]="{
        'background-color': '#373737',
      }"
      count="6"
      animation="progress-dark"
      appearance="circle"
      class="flex flex-col justify-center items-center gap-4 my-5"
    />
  }

  <div class="icon-menu" [ngClass]="sidebarDrawer.opened ? '!hidden' : ''">
    @if (config) {
      @for (item of config.menu; track item) {
        <div
          class="item"
          [routerLinkActive]="['active']"
          [routerLinkActiveOptions]="{ exact: true }"
          [matTooltip]="item.label"
          [matTooltipDisabled]="item.child ? true : false"
          matTooltipPosition="right"
        >
          @if (item.icon) {
            <app-icon [routerLink]="item.href" [content]="item.icon" />
          }
          @if (item.child) {
            <div class="child">
              <div class="hover-menu">
                <div class="title">{{ item.label }}</div>
                <div class="child-menu">
                  <mat-list>
                    @for (item of item.child; track item) {
                      <a
                        mat-list-item
                        [routerLink]="item.href"
                        [routerLinkActive]="['active']"
                        [routerLinkActiveOptions]="{ exact: true }"
                        (click)="onHiddeRightDrawer()"
                        *reqRolesIf="item"
                      >
                        @if (item.icon) {
                          <app-icon class="h-[24px] w-[24px] leading-none" [content]="item.icon" />
                        }
                        {{ item.label }}
                      </a>
                    }
                  </mat-list>
                </div>
              </div>
            </div>
          }
        </div>
      }
    }
  </div>

  <div class="bottom">
    @if (branding) {
      <div class="flex flex-row flex-wrap gap-3 justify-center py-3 icon-actions">
        <app-btn
          [matTooltip]="'媒体库'"
          [matTooltipPosition]="sidebarDrawer.opened ? 'above' : 'right'"
          (click)="onSelectAssets()"
          [content]="{
            label: '',
            mode: 'icon',
            icon: { svg: 'image-search-outline' },
          }"
        />
        @if (builder.themeMode | async; as mode) {
          <app-btn
            [matTooltip]="mode === 'light' ? '切换暗黑风格' : '切换浅色风格'"
            [matTooltipPosition]="sidebarDrawer.opened ? 'above' : 'right'"
            (click)="onToggleBuilderTheme(mode)"
            [content]="{
              label: '',
              mode: 'icon',
              icon: {
                svg: mode === 'light' ? 'white-balance-sunny' : 'moon-waning-crescent',
              },
            }"
          />
        }
      </div>
      <mat-divider />
      <div
        class="flex items-center my-3 gap-3 justify-center"
        [ngClass]="sidebarDrawer.opened ? 'flex-row' : 'flex-col'"
      >
        @if (branding.header.params.userInfo) {
          <app-user-menu />
        }
        <div class="toggle">
          <div class="wrapper" (click)="onToggle()">
            @if (sidebarDrawer.opened) {
              <app-icon [content]="{ svg: 'chevron-left' }">
                <div class="text">收起</div>
              </app-icon>
            }
            @if (!sidebarDrawer.opened) {
              <app-icon matTooltip="展开" [content]="{ svg: 'chevron-right' }" />
            }
          </div>
        </div>
      </div>
    }
  </div>
</div>
